<template>
  <div>
    <div v-for="(item,index) in packageData" :key="index">
      <el-card style="margin-top:30px;font-weight:bolder " :body-style="{ 'padding': '0px' }">
        <div style="padding:10px;background-color:#f9fafc">
          <el-row>
            <el-col :span="7" :offset="2">
              订单时间：
              <span style="font-weight:normal ;color:#99A9BF">{{item.create_date}}</span>
            </el-col>
            <el-col :span="9" :offset="3">
              订单号：<span style="font-weight:normal;color:#99A9BF"> {{item.id}}</span>
            </el-col>
          </el-row>
          <el-row style=" margin-top:15px; ">
            <el-col :span="7" :offset="2" style="float:left">
              套餐名称：
              <span style="font-weight:normal ;color:#99A9BF">{{item.package_name}}</span>
            </el-col>
            <el-col :span="9" :offset="3">
              折扣：
              <span style="color:#99A9BF;font-weight:normal ;">{{item.discount}}</span>
            </el-col>
          </el-row>
          <el-row style=" margin-top:15px; ">
            <el-col :span="7" :offset="2">
              价格：
              <span style="font-size:1em;font-weight:bold;color:red;">￥{{item.money}}</span>
              元
            </el-col>
            <!-- <el-col :span="8" :offset="4">
               折后价：
               <span style="font-size:1em;font-weight:bold;color:red;">￥{{item.discount_money}}</span>
               元
            </el-col> -->
          </el-row>
          <el-row style="margin-top:15px;font-weight:normal">
            <el-col :span="12" :offset="2" style="color:#99A9BF;font-size:12px;">
              请您在提交订单后
              <span style="font-size:15px;font-weight:;color:#f60;">30分钟</span>
              内完成支付，否则订单会自动取消。
            </el-col>
          </el-row>
          <!--         <div class="optionB" :id="`${item.id}_orderid`">
                   <el-row style="font-weight:normal" >
                      <el-col :span="22" :offset="1">
                          <div v-for="(list,index) in serviceList" :key="index">
                              {{list.service_type_title}}
                          </div>
                      </el-col>
                  </el-row>
                  </div> -->
        </div>
        <el-row class="el_row_info">
          <!--         <el-col :span="6" :offset="9"style="text-align:center;margin-top:5px;font-weight:normal;">
                      <span style="cursor:pointer ;"  @click="showList($event,item.id)">{{name}}</span>
                  </el-col> -->
          <span class="p_btn" type="text" style="text-align:center; " v-show="settlementBtn"
                @click=" endMoney(item.id)">结算</span>
        </el-row>
      </el-card>
    </div>
    <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total" :page-size="4"
                   style="margin-top:1em;">
    </el-pagination>
  </div>
</template>
<script type="text/javascript">
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    props: ['orderInfo'],
    data () {
      return {
        page_no: 1,
        total: 0,
        name: '▼查看详情',
        particularsList: false,//详情界面隐藏
        settlementBtn: true,//结算按钮隐藏
        packageData: [],
        serviceList: [],
      }
    },
    created () {
      this.getListInfo(1)
    },
    methods: {
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      /*      showList(event,item_id){
              this.getServiceInfo(item_id);
              var m = item_id + "_orderid";
              if(event.target.innerHTML === '▲收起'){
                document.getElementById(m).className = "optionB";
                event.target.innerHTML = '▼查看详情';
              }else{
                document.getElementById(m).className = "";
                event.target.innerHTML = '▲收起';
              }
            },*/
      getServiceInfo (ID) {
        this.serviceList = []
        let _this = this
        let params = new Object()
        params.id = ID
        postDataToServer('PACKAGE_ORDER_GET', params).then((data) => {
          if (data.status === 0) {
            this.serviceList = data.data_list.list_packagedetail
          }
        })
      },
      hidesList () {
        this.particularsList = false
      },
      getListInfo (pageNum) {
        if (this.orderInfo.Payments == 1) {
          this.settlementBtn = false
        }
        let _this = this
        let params = new Object()
        params.state = this.orderInfo.Payments
        params.page_no = pageNum
        params.page_size = 4
        postDataToServer(this.orderInfo.key, params).then((data) => {
          if (data.status === 0) {
            this.packageData = data.data_list
            this.total = data.total_results
          } else {
            this.$message({
              message: data.message,
              type: 'error'
            })
          }
        })
      },
      endMoney (ID) {
        this.$emit('returnid', ID)
      },

    },
    watch: {
      page_no (val, oldVal) {
        this.getListInfo(val)
      }
    }
  }
</script>
<style scoped>


  .show {
    display: none;
  }

  .p_btn {
    cursor: pointer;
    height: 12px;
    line-height: 12px;
    user-select: none;
    background-color: #ff8547;
    color: white;
    width: 15%;
    float: right;
    padding: 10px;
    font-weight: bold;
    font-size: 1.0em;
    letter-spacing: 5px;
  }

  .item {
    padding: 18px 0;
  }

  .demo-block-control {
    text-align: center;
  }

  .span_name {
    margin-top: 5px;
    color: #d3dce6;
    cursor: pointer;
  }

  .el-icon-caret-bottom {
    content: "\E604";
  }

  .optionB {
    display: none;
    border-top: 1px solid black;
  }

  .mouseEnter {
    color: blue;
    background-color: #f9fafc;
  }

  .el_row_info {
    background-color: #f9fafc;
    color: #99A9BF;
  }

  .el_row_info:hover {
    background-color: #EFF2F7;
    color: #20a0ff;
  }
</style>
